<!DOCTYPE html>
<html>
<head>
<#include "${request.contextPath}/common/head.ftl"/>
    <link rel="stylesheet" href="${request.contextPath}/static/css/index.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"/>
    <link rel="stylesheet" href="${request.contextPath}/static/css/jquery.countdown.css"/>
    <link rel="stylesheet" href="${request.contextPath}/static/css/countdown.css"/>
    <script src="${request.contextPath}/static/js/jquery.countdown.js"></script>
    <script src="${request.contextPath}/static/js/countdown.js"></script>

    <title>AdminLTE 2 | Log in</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<#include "${request.contextPath}/common/header.ftl"/>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                shark
                <i class="fa fa-clock-o"></i>
            </h1>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="mtldiv">
                <img src="${request.contextPath}/static/img/fsw.png">
            </div>
        <#if activity??>
        <#--活动开始倒计时-->
            <#if activity.status==0>
                <div id="block_countdown">
                    <label hidden="hidden" class="starttime">${activity.startTime}</label>
                    <label hidden="hidden" class="period">${activity.period}</label>
                    <div id="countdown"></div>
                    <p id="note"></p>
                </div>
            <#else >

                <p class="status" hidden="hidden">${activity.status}</p>
            <#--动态展示活动参与人员-->

                <div id="block_loadding">
                    <#if activity.status==1>
                        <h1 style="color: #ba1515;position: relative;text-align: center;margin-top: 20px;">
                            活动已开始，火热进行中...</h1>
                    <#elseif activity.status==2>
                        <h1 style="color: #ba1515;position: relative;text-align: center;margin-top: 20px;">
                            活动进行中...</h1>
                    <#elseif activity.status==3>
                        <h1 style="color: #ba1515;position: relative;text-align: center;margin-top: 20px;">
                            活动结束</h1>
                    </#if>
                <#--<h6>--当前已有<font class="countjoiners" style='color: #FF0000;font-size: 16px;'>0</font>人参与--</h6>-->
                <#--<div class="box-body no-padding">-->
                <#--<ul class="users-list clearfix">-->
                <#--</ul>-->
                <#--</div>-->
                    <!-- row -->
                    <div class="row">
                        <div class="col-md-12">
                            <!-- The time line -->
                            <ul class="timeline">
                                <!-- timeline time label -->
                                <li class="time-label">
                                  <span class="bg-red">
                                    ${activity.period}期
                                  </span>
                                </li>
                                <li>
                                    <i class="fa fa-user bg-aqua"></i>

                                    <div class="timeline-item">

                                        <h3 class="timeline-header">当前已有<font class="countjoiners"
                                                                              style='color: #FF0000;font-size: 16px;'>0</font>人参与
                                        </h3>

                                        <div class="timeline-body">
                                            <ul class="users-list clearfix">
                                            </ul>
                                        </div>

                                    </div>
                                </li>
                            <#--停止参与并开始分组-->
                                <li>
                                    <i class="fa fa-stop bg-maroon"></i>

                                    <div class="timeline-item">
                                        <h3 class="timeline-header no-border"><a class="startgroup"
                                                                                 href="#">开始分组</a>
                                            请选择下方组数开始分组
                                        </h3>
                                        <ul class="pagination pagination-sm no-margin pull-left">
                                            <li class="numsel"><a href="#">3</a></li>
                                            <li class="numsel"><a href="#">4</a></li>
                                            <li class="numsel"><a href="#">5</a></li>
                                            <li class="numsel"><a href="#">6</a></li>
                                            <li class="numsel"><a href="#">7</a></li>
                                            <li class="numsel"><a href="#">8</a></li>
                                        </ul>
                                    </div>
                                </li>
                            <#--分组结果-->
                                <#if activity.status==2||activity.status==3>
                                    <li>
                                        <i class="fa fa-users bg-blue"></i>

                                        <div class="timeline-item">

                                            <h3 class="timeline-header">分组结果
                                            </h3>
                                            <div class="timeline-body">
                                                <table class="table table-condensed">
                                                    <tr>
                                                        <th style="width: 60px">组别</th>
                                                        <th>组员</th>
                                                    </tr>
                                                    <#if groupResult??>
                                                        <#assign dates=groupResult />
                                                        <#list dates as groupdatas>
                                                            <tr>
                                                                <td>第${groupdatas_index+1}组：</td>
                                                                <td>
                                                                    <#list groupdatas as tJoiners>
                                                                        <#if !tJoiners_has_next>
                                                                        ${tJoiners.realname}
                                                                        <#else >
                                                                        ${tJoiners.realname}、
                                                                        </#if>

                                                                    </#list>
                                                                </td>
                                                            </tr>
                                                        </#list>
                                                    </#if>
                                                </table>
                                            </div>

                                        </div>
                                    </li>
                                    <li>
                                        <i class="fa fa-stop bg-maroon"></i>

                                        <div class="timeline-item">
                                            <h3 class="timeline-header no-border"><a
                                                    href="${request.contextPath}/activity/sharklucker">开始抽取免单</a>
                                            </h3>
                                        </div>
                                    </li>
                                </#if>
                            <#--活动结束，展示中奖名单-->
                                <#if activity.status==3>
                                    <li>
                                        <i class="fa fa-trophy bg-orange"></i>

                                        <div class="timeline-item">

                                            <h3 class="timeline-header">抽奖结果
                                            </h3>
                                            <div class="timeline-body">
                                                <h4 class="timeline-header">恭喜第<font
                                                        style='color: #FF0000;font-size: 18px;'>${(lucknum+1)}</font>组
                                                </h4>
                                                <br>
                                                <#assign dates=groupResult />
                                                <#list dates as groupdatas>
                                                    <#if groupdatas_index==lucknum>
                                                        <#list groupdatas as tJoiners>
                                                            <#if !tJoiners_has_next>
                                                            ${tJoiners.realname}
                                                            <#else >
                                                            ${tJoiners.realname}、
                                                            </#if>

                                                        </#list>
                                                    </#if>
                                                </#list>
                                            </div>
                                        </div>
                                    </li>

                                </#if>
                                <!-- END timeline item -->
                                <li>
                                    <i class="fa fa-clock-o bg-gray"></i>
                                    <div class="timeline-item">
                                        <h3 class="timeline-header no-border"><a
                                                href="${request.contextPath}/activity/overActivity">结束活动</a>
                                        </h3>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </#if>

        <#--开始抽取免单-->
        <#--活动结束-->
        <#else >
            <h3 class="empty_tips" style="  position: relative;text-align: center;margin-top: 50px;">
                未获取当前活动信息，请前往创建</h3>
        </#if>

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

<#include "${request.contextPath}/common/foot.ftl"/>

</div>
<script>
    var timer;
    var groupnum = 3;
    $(function () {
        $("#func_currentAc").attr("class", "active");
        timer = window.setInterval(getJoiners, 2000);
        $(".numsel").each(function (n) {
            $(this).click(function () {
                groupnum = $(this).children("a").text();
            })

        });
        $(".startgroup").click(function () {
            window.location.href = "/activity/groupJoiners?groupNum="+groupnum;
        });

    })
    function getJoiners() {
        $.ajax({
            url: "/activity/getCurrentActivityJoiners",
            dataType: "json",
            type: 'POST',
            //传送请求数据
            success: function (result) {
                console.info(result);
                if (result.code == "200") {
                    var joiners = result.joiners;
                    $('.countjoiners').text(joiners.length)
                    var listdatas = "";
                    for (var i = 0; i < joiners.length; i++) {
                        var date = dateToStr(joiners[i].createTime);
                        listdatas += "<li style='width: 120px'><img style='width: 60px;' src=\"../adminlte/dist/img/" + joiners[i].headimg + "\" alt=\"User Image\"><a class=\"users-list-name\" href=\"#\">" + joiners[i].realname + "</a><span class=\"users-list-date\">" + date + "</span></li>"
                    }
                    $('.clearfix').html(
                            listdatas
                    )
                    var status = $('.status').text();
                    if (status >= 2) {
                        myStopFunction();
                    }
                } else {
                }
            }
        });
    }
    function dateToStr(datetime) {
        var date = new Date(datetime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        return y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s;
    }
    function myStopFunction() {
        clearInterval(timer);
    }


</script>
</body>
</html>
